<script setup>
    import { reactive, ref,watch} from "vue";
    import { Search, Delete } from "@element-plus/icons-vue";
    import AddNewDialog from "./AddNewDialog";
    
    
    let visitable = ref(false);
    // 打开新建窗口
    const addNew = () => {
      visitable.value = true;
    };
    // 关闭新建窗口
    const handleClose = () => {
      visitable.value = false;
    };
    // 在左侧列表添加当前数据
    const tableDataLeft = reactive([
      // {
      // projectName:'地方'
      // }
    ]);
    // 右侧列表数据
    
    let tableDataRight = ref([]);
    let columnNames = ref([])
    // const columnNames = computed(()=>tableDataRight[0].keys())
    // 拿到上传数据事件
    const getUploadData = (param) => {
      console.log("父组件拿到数据", param.name);
      tableDataLeft.push({ projectName: param.name });
      tableDataRight.value = param.data;
      console.log("父组件拿到数据", tableDataRight.value);
    //   console.log(tableDataRight[0])
    };
    watch(tableDataRight,(newValue)=>{
        columnNames.value=Object.keys(newValue[0])
        
    
    })
    </script>
    <template>
      <div class="mateData-Wrap">
        <div class="left-table">
          <el-card class="search-card">
            <!-- 左侧搜索框 -->
            <el-input
              class="input-search"
              v-model="searchContent"
              placeholder="输入关键词"
              clearable
            />
            <el-button
              class="butt-search"
              :icon="Search"
              @click="handerSearchFist"
              circle
            />
    
            <!-- 新建按钮 -->
            <div class="btns">
              <el-button class="butt-newBuilt" type="success" @click="addNew"
                >新建</el-button
              >
              <el-button class="butt-analyze" type="success">分析</el-button>
            </div>
          </el-card>
          <el-table
            class="tabel-content"
            :data="tableDataLeft"
            style="width: 100%"
            stripe
            border
          >
            <el-table-column
              type="index"
              label="id"
              width="50"
              resizable
              align="center"
            />
            <el-table-column
              prop="projectName"
              label="数据名称"
              min-width="180"
              align="center"
            />
            <el-table-column label="" min-width="50" align="center">
              <template #default="scope">
                <el-button
                  type="danger"
                  :icon="Delete"
                  circle
                  @click="handleDelete(scope.$index, scope.row)"
                  style="float: right"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
    
        <div class="search-newBuilt">
          <!-- 右侧子表格部分 -->
          <el-card class="table">
            <el-table
              class="tabel-content"
              :data="tableDataRight"
              style="width: 100%"
              stripe
              border
            >
              <el-table-column
                type="index"
                label="编号"
                width="60"
                resizable
                align="center"
               
              />
              <el-table-column
                v-for="colName in columnNames"
                :key="colName"
                :prop="colName"
                :label="colName"
                min-width="80"
                
                align="center"
              />
            </el-table>
            <!-- 分页
            <div class="pagination-wrap">
              <el-pagination
                class="pagination"
                background
                :page-size="pageSize"
                v-model:current-page="currentPage"
                :pager-count="5"
                layout="prev, pager, next"
                :total="totalList"
              />
            </div> -->
          </el-card>
        </div>
      </div>
      <AddNewDialog
        :visitable="visitable"
        @handleClose="handleClose"
        @getUploadData="getUploadData"
      ></AddNewDialog>
    </template>
    <style lang="less" scoped>
    .mateData-Wrap {
      display: flex;
      .left-table {
        width: 300px;
        .search-card {
          position: relative;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          margin-bottom: 10px;
          width: 300;
    
          .input-search {
            width: 200px;
            height: 40px;
          }
          .butt-search {
            margin-left: 10px;
          }
          .btns {
            display: flex;
            padding-top: 10px;
          }
          .butt-newBuilt {
            // margin: 10px;
            //    margin-left:0;
          }
          .butt-analyze {
            margin-left: 10px;
          }
        }
      }
      .search-newBuilt {
        flex: 1;
        padding-left: 10px;
      }
    }
    </style>
    